<template>
  <div class="container_bg">
    <div class="box" v-for="item in count" :key="item"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed } from "vue";
export default defineComponent({
  name: "LoginBg",
  setup(props) {
    const count = 300;

    return {
      count,
    };
  },
});
</script>

<style lang="scss" scoped>
.container_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  .box {
    position: relative;
    width: 24px;
    height: 24px;
    float: left;
    background-color: $loginBg;
    border: 1px solid rgba(128, 216, 186, 0.2);
    box-sizing: border-box;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      top: 6px;
      left: 6px;
      right: 6px;
      bottom: 6px;
      background-color: $loginBg;
      box-shadow: 0px 1px 4px $loginBg;
      transition: 3s ease-in-out;
    }
    &:hover:before {
      transition: 0s ease-in-out;
    }

    &:nth-child(9n + 1):hover:before {
      background-color: #f00;
      box-shadow: 0 0 3px #f00 0 0 10px #f00;
    }
    &:nth-child(9n + 2):hover:before {
      background-color: rgb(51, 255, 0);
      box-shadow: 0 0 3px rgb(51, 255, 0) 0 0 10px rgb(51, 255, 0);
    }
    &:nth-child(9n + 3):hover:before {
      background-color: rgb(0, 68, 255);
      box-shadow: 0 0 3px rgb(0, 68, 255) 0 0 10px rgb(0, 68, 255);
    }
    &:nth-child(9n + 4):hover:before {
      background-color: rgb(179, 255, 0);
      box-shadow: 0 0 3px rgb(179, 255, 0) 0 0 10px rgb(179, 255, 0);
    }
    &:nth-child(9n + 5):hover:before {
      background-color: rgb(255, 0, 157);
      box-shadow: 0 0 3px rgb(255, 0, 157) 0 0 10px rgb(255, 0, 157);
    }
    &:nth-child(9n + 6):hover:before {
      background-color: rgb(153, 0, 255);
      box-shadow: 0 0 3px rgb(153, 0, 255) 0 0 10px rgb(153, 0, 255);
    }
    &:nth-child(9n + 7):hover:before {
      background-color: rgb(0, 255, 128);
      box-shadow: 0 0 3px rgb(0, 255, 128) 0 0 10px rgb(0, 255, 128);
    }
    &:nth-child(9n + 8):hover:before {
      background-color: rgb(76, 0, 255);
      box-shadow: 0 0 3px rgb(76, 0, 255) 0 0 10px rgb(76, 0, 255);
    }
    &:nth-child(9n + 9):hover:before {
      background-color: rgb(238, 255, 0);
      box-shadow: 0 0 3px rgb(238, 255, 0) 0 0 10px rgb(238, 255, 0);
    }
  }
}
</style>